<template>
  <div class="list">
    <Content v-for="type in list" :key="type.id" v-bind="type"></Content>
  </div>
</template>
<script>
import Content from './components/Content.vue';
export default {
  name: 'App',
  components: {
    Content,
  },
  data() {
    return {
      list: [
        { id: 1, title: '美食', detail: ['火锅', '烤肉', '烧烤', '面条'] },
        { id: 2, title: '旅游', detail: ['西安', '深圳', '厦门', '武汉'] },
        { id: 3, title: '游戏', detail: ['DNF', 'DOTA', '红警', 'CS1.4'] },
      ],
    };
  },
};
</script>
<style scoped>
.list {
  display: flex;
  justify-content: space-between;
}
</style>
